<template>
  <div class="apply-page">
    <div class="header-row">
      <el-row>
        <el-col :span="5">
          <span>姓名：</span>
          <el-input
            v-model="searchForm.name"
            placeholder="请输入姓名"
            style="width: calc(100% - 56px)"
          />
        </el-col>
        <el-col :span="6">
          <span>手机号码：</span>
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号码"
            style="width: calc(100% - 84px)"
          />
        </el-col>
        <el-col :span="6">
          <span>申请日期：</span>
          <el-date-picker
            v-model="searchForm.date"
            type="date"
            style="width: calc(100% - 84px)"
            placeholder="请选择申请日期"
          />
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="list-row">
      <el-table :data="listData" style="width: 100%" border>
        <el-table-column prop="name" label="申请人" />
        <el-table-column prop="phone" label="手机号码" />
        <el-table-column prop="sex" label="性别" width="80">
          <template slot-scope="scope">
            <span>{{
              scope.row.sex === 1 ? "男" : scope.row.sex === 2 ? "保密" : "女"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间">
          <template slot-scope="scope">
            {{ dayjs(scope.row.applyTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="回收站地址" width="300" />
        <el-table-column label="操作" width="100">
          <el-button type="text" @click="handlePass">通过</el-button>
          <el-button type="text" @click="handleRefuse">拒绝</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { rejectApply, resolveApply, queryRecycleList } from '@/api'

export default {
  data() {
    return {
      searchForm: {
        name: undefined,
        phone: undefined,
        date: undefined
      },
      listData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    dayjs,
    // 获取列表数据
    getListData() {
      const params = {
        name: this.searchForm.name,
        phone: this.searchForm.phone,
        startTime: this.searchForm.date,
        page: this.pagination.current,
        size: this.pagination.pageSize,
        status: 0,
        type: 2
      }
      queryRecycleList(params).then(res => {
        this.listData = res.list
        this.pagination.total = res.total
      }).catch(() => {
        this.$message.error('获取列表数据失败')
      })
    },
    // 搜索
    handleSearch() {
      this.getListData()
    },
    // 通过
    handlePass(row) {
      resolveApply({ id: row.id }).then(res => {
        this.$message.success('已通过')
        this.getListData()
      }).catch(() => {
        this.$message.error('操作失败')
      })
      // this.$message.success('已通过')
    },
    // 拒绝
    handleRefuse(row) {
      rejectApply({ id: row.id }).then(res => {
        this.$message.success('已拒绝')
        this.getListData()
      }).catch(() => {
        this.$message.error('操作失败')
      })
      // this.$message.warning('已拒绝')
    },
    // 改变页面数量
    handleSizeChange(pageSize) {
      this.pagination.current = 1
      this.pagination.pageSize = pageSize
      this.getListData()
    },
    // 切换分页
    handleCurrentChange(current) {
      this.pagination.current = current
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-page {
  .list-row {
    padding-top: 30px;
  }
  .pagination {
    padding-top: 10px;
    text-align: right;
  }
}
</style>
